<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS_伪类选择器结构伪类3</title>
  <style>
      /*选中div下所有的子元素中倒数排行为3的p元素 所有子元素参与排行，每个div独立计算，也符合an+b规则*/
        div>p:nth-last-child(3){
            color: blue;
        }
      /*选中div下所有的子元素中倒数排行为2的p元素 所有p元素参与排行，每个div独立计算*/
        div>p:nth-last-of-type(2){
            color: red;
        }
      /*所有子元素中没有其他兄弟元素的span元素，所有子元素都参与排行，每个div独立计算*/
        div>span:only-child{
            color:yellow;
        }
      /*所有子元素中没有其他兄弟元素的span元素，所有span元素参与排行，每个div独立计算*/
        span:only-of-type{
            color: rosybrown;
        }
        /*这个页面中测试1显示为粉色是因为被覆盖掉了，前面加上div就会选中这个单独的span了由于权重增加了*/
  </style>
</head>
<body>
    <div>
        <span>测试1</span>
    </div>
    <div>
        <span>孙七：100</span>   <!--排行1-->
        <p>张三：90</p>          <!--排行2-->
        <p>李四：80</p>          <!--排行3-->
        <p>王五：70</p>          <!--排行4-->
        <p>赵六：60</p>          <!--排行5-->
        <h2>测试三</h2>
    </div>
</body>
</html>